<template>
    <div>
        <b>默认的价格是7999</b><br />
        <b>默认选中是512gb</b>
        <button @click="changeMemery(0)">
            512GB
            <span>{{ -(pro.memory.price - memerySet[0].price)}}</span>
        </button>
        <button @click="changeMemery(1)">
            1T
            <span>{{ -(pro.memory.price - memerySet[1].price)}}</span>
        </button>
        <button @click="changeMemery(2)">
            2T
            <span>{{ -(pro.memory.price - memerySet[2].price)}}</span>
        </button>
        <button @click="changeMemery(3)">
            3T
            <span>{{-(pro.memory.price - memerySet[3].price)}}</span>
        </button>
    </div>
</template>

<script>
import Product from "@/plugins/Product";
export default {
    watch: {},
    data() {
        return {
            pro: {},
            memerySet: [
                { title: "512Gb", price: 0 },
                { title: "1t", price: 1500 },
                { title: "2t", price: 3000 },
                { title: "3t", price: 6000 },
            ],
            oldMemery: null,
        };
    },
    mounted() {},
    methods: {
        changeMemery(i) {
            // this.pro.memory
            this.oldMemery = this.pro.memory;
            this.pro.setMemory(this.memerySet[i]);
            // console.log(this.pro.memory,this.oldMemery)
        },
    },
    created() {
        this.pro = new Product.Mac(2, "mac book air");
        // 默认选中的是512gb和7999价格
        this.pro
            .setArm({ title: "6g内存的mac", price: 7999 })
            .setMemory({ title: "512Gb", price: 0 });
        this.oldMemery = this.pro.memory;
    },
};
</script>

<style scoped>
button {
    display: block;
    padding: 10px;
    margin-bottom: 30px;
}
</style>